<template>
  <div class="login_body">
    <div class="login">
      <div class="container a-container" id="a-container">
        <el-form :model="user" class="form">

          <el-form-item>
            <h2 class="title">邮 箱 验 证</h2>
          </el-form-item>

          <el-form-item>
            <el-input v-model="user.account" class="form_input" placeholder="请输入账号"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="user.email" class="form_input" placeholder="请输入用户邮箱"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="mailcode" class="form_input" style="width: 100px;" placeholder="请输入验证码"></el-input>
            <el-button type="primary" style="width: 75px; margin-left: 7px; padding-left: 7px; border-radius: 5px;" size="small" @click="getmailcode">获取验证码</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="medium" @click="checkcode" round>核验身份</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="switch" id="switch-cnt">
        <div class="switch_circle"></div>
        <div class="switch_circle switch_circle-t"></div>

        <div class="switch_container" id="switch-c1">
          <h2 class="switch_title title" style="letter-spacing: 0;">密 码 忘 记 了 ?</h2>
          <p class="switch_description description">右 边 通 过 邮 箱 重 置 一 下 吧</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import "@/assets/loginandregister.css";
</style>

<script>

import request from "@/utils/request";

export default {
  name: "ForgetPwd",
  data() {
    return {
      user: {},
      mailcode:''
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {

  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    //获取验证码
    getmailcode() {
      if (!this.user.account) {
        this.$message.warning("请输入用户账号")
      }
      else if (!this.user.email) {
        this.$message.warning("请输入邮箱")
      }
      else if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(this.user.email)) {
        this.$message.error("请输入正确的邮箱地址!")
      }
      else {
        request.post("/user/sendmailcode/"+ this.user.email, {account:this.user.account}).then(res => {
          if (res.code === '0'){
            this.$message.success("发送成功")
          } else {
            this.$message.error(res.msg)
          }
        })
      }

    },
    //核验身份
    checkcode() {
      if (!this.user.account) {
        this.$message.warning("请输入用户账号")
      }
      else if (!this.user.email) {
        this.$message.warning("请输入邮箱")
      }
      else if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(this.user.email)) {
        this.$message.error("请输入正确的邮箱地址!")
      }
       else if (!this.mailcode) {
        this.$message.warning("请输入验证码")
      }
      else {
        //将用户账号临时存储在localstorage中 便于重置密码时查找
        localStorage.setItem("account",this.user.account)
        request.post("/user/checkcode/" + this.mailcode, this.user).then(res => {
          if (res.code === '0'){
            this.$message.success("验证成功!")
            setTimeout(function (){},3000);
            this.$router.push("/resetpwdview")
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    }
  }
}
</script>

